import {useEffect, useRef, useState} from "react";
import { Modal, Descriptions } from 'antd';
import ProSkeleton from '@ant-design/pro-skeleton';
import {
	getCommissionDetail,
	getCommissionList,
} from "@/services/ant-design-pro/FinancialOperation";
import ProTable, {ActionType} from "@ant-design/pro-table";

const OrderDetailsModal = (props) => {
	const {visible,setVisible ,id} = props;
	const [orderDetail,setOrderDetail] = useState({})
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	const columns = [
		{
			title: '佣金金额',
			dataIndex: 'account_amount',
			search:false,
			width: 150,
			align: 'center',
		},
		{
			title: '获得时间',
			dataIndex: 'created_at',
			width: 150,
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remarks',
			search:false,
		},
	];
	useEffect(async ()=>{
		let data = await getCommissionDetail(id)
		setOrderDetail(data)
	},[])

	return (
		<Modal
			width={800}
			visible={ visible  }
			title="用户详情"
			footer={false}
			onCancel={()=>{ setVisible(false) }}
		>
			{ visible ?
				<div>
					<Descriptions
						title="收货信息"
						column={2}
						style={{borderBottom:'1px solid #ccc',marginBottom:'10px'}}
						contentStyle={{color:'#666'}}
						labelStyle={{color:'#666'}}
					>
						<Descriptions.Item label="姓名">{orderDetail.real_name}</Descriptions.Item>
						<Descriptions.Item label="上级推广人">{orderDetail.promoter}</Descriptions.Item>
						<Descriptions.Item label="佣金总收入">{orderDetail.brokerage_price}</Descriptions.Item>
						<Descriptions.Item label="用户余额">{orderDetail.balance}</Descriptions.Item>
						<Descriptions.Item label="创建时间">{orderDetail.created_at}</Descriptions.Item>
					</Descriptions>
					<ProTable
						columns={columns}
						actionRef={actionRef}
						request={async (params = {}, sort, filter) => {
							let {data} = await getCommissionList(id,{...params,...sort,...filter})
							return {
								data,
								success:true
							}
						}}
						editable={{
							type: 'multiple',
						}}
						columnsState={{
							persistenceKey: 'pro-table-singe-demos',
							persistenceType: 'localStorage',
						}}
						rowKey="id"
						search={{
							labelWidth: 'auto',
							defaultCollapsed: false,
						}}
						form={{
							// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
							syncToUrl: (values, type) => {
								if (type === 'get') {
									return {
										...values,
										created_at: [values.startTime, values.endTime],
									};
								}
								return values;
							},
						}}
					/>
				</div>
				:  <ProSkeleton type="result" />
			}
		</Modal>
	);
};

export default OrderDetailsModal;
